<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: aqua;
    }
</style>
<body>
    <div id="app">
     <div class="box" @mouseover="add" @mouseout="add1">
        <div v-if="vf">11111</div>
     </div>
    </div>
</body>

<script src="Vue.js"></script>
<script>
    // 1. 鼠标放上去显示 移开消失 
    const {createApp,ref}=Vue 
    createApp({
        setup(){
         let vf = ref(false)
         function add(){        
                vf.value = true
         }
         function add1(){
            vf.value = false
         }
            return{
            vf,
            add,
            add1
            }
        }
    }).mount('#app')
</script>
</html>